<template>
  <div class="personal-center-container">
    <el-row :gutter="20">
      <el-col :lg="16" :md="12" :sm="24" :xl="16" :xs="24">
        <el-card shadow="hover">
          <el-tabs v-model="activeName">
            <el-tab-pane label="基本信息" name="first">
              <el-col :lg="12" :md="16" :sm="24" :xl="12" :xs="24">
                <el-form
                  ref="form"
                  label-width="80px"
                  :model="userInfo"
                  :rules="rules"
                >
                  <el-form-item label="账号">
                    <el-input
                      v-model="userInfo.accountNumber"
                      :readonly="true"
                    />
                  </el-form-item>
                  <el-form-item label="名称">
                    <el-input v-model="userInfo.userName" />
                  </el-form-item>
                  <el-form-item label="邮箱">
                    <el-input v-model="userInfo.email" />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="second">
              <el-col :lg="12" :md="16" :sm="24" :xl="12" :xs="24">
                <el-form
                  ref="changePwdForm"
                  label-width="80px"
                  :model="changePwdForm"
                  :rules="pwdRules"
                >
                  <el-form-item label="旧密码">
                    <el-input
                      v-model="changePwdForm.oldPwd"
                      autocomplete="off"
                      :show-password="true"
                    />
                  </el-form-item>
                  <el-form-item label="新密码">
                    <el-input
                      v-model="changePwdForm.newPwd"
                      autocomplete="off"
                      :show-password="true"
                    />
                  </el-form-item>
                  <el-form-item label="确认新密码">
                    <el-input
                      v-model="changePwdForm.aginPwd"
                      autocomplete="off"
                      :show-password="true"
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="submitPwd">
                      保存
                    </el-button>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import {
    GetPersonalInfo,
    ModifyUserSelfInfo,
    ModifyUserPassWord,
  } from '@/api/sysSetting/users'

  export default {
    name: 'PersonalCenter',
    data() {
      return {
        activeName: 'first',
        userInfo: {
          accountNumber: '',
          userName: '',
          email: '',
        },
        changePwdForm: {
          oldPwd: '',
          newPwd: '',
          aginPwd: '',
        },
        rules: {
          userName: [
            { required: true, trigger: 'blur', message: '请输入用户名' },
          ],
        },
        pwdRules: {
          oldPwd: [
            { required: true, trigger: 'blur', message: '旧密码不能为空' },
          ],
          newPwd: [
            { required: true, trigger: 'blur', message: '请输入新密码' },
          ],
          aginPwd: [
            { required: true, trigger: 'blur', message: '请再次输入新密码' },
          ],
        },
      }
    },
    computed: {
      ...mapGetters({
        avatar: 'user/avatar',
      }),
    },
    async created() {
      this.getPersonalInfo()
    },
    methods: {
      // 修改个人信息
      onSubmit() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            ModifyUserSelfInfo(this.userInfo).then((res) => {
              if (res.data) {
                this.$baseMessage(res.msg, 'success')
                this.getPersonalInfo()
              } else {
                this.$baseMessage(res.msg, 'error')
              }
            })
          }
        })
      },
      // 修改密码
      submitPwd() {
        this.$refs['changePwdForm'].validate(async (valid) => {
          if (valid) {
            if (this.changePwdForm.newPwd != this.changePwdForm.aginPwd) {
              this.$baseMessage('两次密码不一致', 'error')
              return
            }
            ModifyUserPassWord({
              oldPwd: this.changePwdForm.oldPwd,
              newPwd: this.changePwdForm.newPwd,
            }).then((res) => {
              if (res.data) {
                this.$baseMessage(res.msg, 'success')
                this.changePwdForm.oldPwd = ''
                this.changePwdForm.newPwd = ''
                this.changePwdForm.aginPwd = ''
              } else {
                this.$baseMessage(res.msg, 'error')
              }
            })
          }
        })
      },
      // 获取个人中心个人信息
      getPersonalInfo() {
        GetPersonalInfo().then((res) => {
          this.userInfo = res.data
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  $base: '.personal-center';
  #{$base}-container {
    padding: 0 !important;

    #{$base}-user-info {
      padding: $base-padding;
      text-align: center;

      ::v-deep {
        .el-avatar {
          img {
            cursor: pointer;
          }
        }
      }

      &-full-name {
        margin-top: 15px;
        font-size: 24px;
        font-weight: 500;
        color: #262626;
      }

      &-description {
        margin-top: 8px;
      }

      &-follow {
        margin-top: 15px;
      }

      &-list {
        margin-top: 18px;
        line-height: 30px;
        text-align: left;
        list-style: none;

        h5 {
          margin: -20px 0 5px 0;
        }

        ::v-deep {
          .el-tag {
            margin-right: 10px !important;
          }

          .el-tag + .el-tag {
            margin-left: 0;
          }
        }
      }
    }

    #{$base}-item {
      display: flex;

      i {
        font-size: 40px;
      }

      &-content {
        box-sizing: border-box;
        flex: 1;

        &-second {
          margin-top: 8px;
        }
      }
    }
  }
</style>
